import React, { useRef, useState, useEffect } from 'react';
import { Layout, Tabs } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  CloseCircleOutlined
} from '@ant-design/icons';
import './css.styl'

function HeaderDom(props) {
  const { Header } = Layout;
  const [activeKey, setActiveKey] = useState('');
  const newTabIndex = useRef(0);
  useEffect(() => {
    setActiveKey(props?.activeKey)
  })

  const onChange = (key) => {
    props?.callBack(key)
  };

  const onEdit = (targetKey, action) => {
    props?.cleanHeader(targetKey)
  };

  return (
    <Header className="site-layout-background" style={{ padding: '0 0 0 20px', display: 'flex', boxSizing: 'border-box', paddingRight: '15px', overflow: 'hidden' }}>
      <div style={{}}>
        {React.createElement(props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: () => props.setCollapsed(!props.collapsed),
        })}
      </div>
      <div className='history-router'>
        <div className="tabs-box">
          <Tabs
            hideAdd
            activeKey={activeKey}
            onChange={onChange}
            type="editable-card"
            onEdit={onEdit}
            items={props?.historyRouter}
          />
        </div>
        {/* <div className="login-box"></div> */}
      </div>
    </Header>
  )
}

export default HeaderDom;